<template>
	<view class="container">
		<view class="tabs">
			<u-tabs
				:list="list"
				lineColor="#f56301"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#06b1a3',
					transform: 'scale(1)'
				}"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
			></u-tabs>
		</view>
		<view class="collectList">
			<u-swipe-action  v-for="(item,index) in showcollect" :key='index' class="swipetop">
				<u-swipe-action-item :options="options1" @click="delcollect">
					<view class="swipe-action  u-border-bottom" >
						<view class="swipe-action-content">
							<view class="left">
								<view class="img">
									<image :src="item.picUrl" mode=""></image>
								</view>
							</view>
							<view class="right">
								<view class="navbox">
									<view class="nav-title">
										<text>{{item.name}}</text>
									</view>
									<view class="nav-text">
										<text>{{item.brief}}</text>
									</view>
									<view class="nav-price">
										<view class="price">
											￥{{item.retailPrice}}
										</view>
										<view class="numbeer">
											
										</view>
									</view>
								</view>
							</view>
					</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		<view >
			<u-modal :show="show" :title="title" :content='content' @confirm='confirm'></u-modal>
		</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [{
				name: '收藏列表',

			}, {
				name: '专题列表',

			}],
			options1: [{                     //滑动删除单元格样式
				text: '删除',
				  style: {
				backgroundColor: '#3c9cff',
				height:'250rpx',
				width:'20vw',
				marginRight:'20rpx',
				borderTopRightRadius: '20rpx',
				borderBottomRightRadius: '20rpx',
				}
			}],
		showcollect:[],   //循环出来的商品收藏数据
		show:false,			//控制确定删除框显示删除
		title:'删除',		//删除框标题
		content:'确定删除吗', //删除框文字
		collindex:null		//当前删除的下标
		}
		
	},
	onLoad() {
		this.getcollect()
		
	},
	methods: {
		getcollect(){
			this.$get(this.API.collect, {
				type: 0
			}).then(res => {
				let page=res.data.data.page
				this.getfor(page,res.data.data.pages)
				
			})
		},
		//循环取得数组
		getfor(page,pages){
			for (let i = page; i <=pages; i++) {
				this.$get(this.API.collect, {
					type: 0,
					page: i
				}).then(res=>{
			this.showcollect=this.showcollect.concat(res.data.data.list)
				})
				
			}
		},
		delcollect(e){
			this.show=!this.show
			this.collindex=e.index
			
		},
		confirm(){
			this.show=!this.show
			let delcollect =this.showcollect[this.collindex]
			this.$post(this.API.addordelete,{type:delcollect.type,valueId:delcollect.valueId}).then(res=>{
				console.log(res.data)
			})
			this.showcollect.splice(this.collindex, 1);
			uni.showToast({
				title: '删除成功',
				icon: 'none',
				duration: 2000
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background-color: #ececec;
	.collectList {
		height: 100vh;
		width: 90vw;
		margin: 30rpx auto;
		border-radius: 20rpx;
		overflow: hidden;
		/deep/ .u-swipe-action{
			margin-bottom: 20rpx;
		}
		.swipe-action {
			background-color: #fff;
			height: 250rpx;
			.swipe-action-content{
				display: flex;
				flex-direction: row;
				margin: 20rpx;
				.left{
					width: 30vw;
					.img{
						image{
							width: 200rpx;
							height: 200rpx;
						}
					}
				}
				.right{
					.navbox{
						.nav-title{
							font-size: 35rpx;
							word-wrap: break-word;
							margin: 20rpx 0;
						}
						.nav-text{
							color: blue;
							margin: 20rpx 0;
							font-size: 20rpx;
							text{
								border: 1px solid blue;
								padding: 5rpx;
							}
						}
						.nav-price{
							display: flex;
							justify-content: space-between;
							margin: 20rpx 0;
						}
					}
				}
			}
			
		}
	}
}
</style>
